<template>
	<view class="user-info">
		<view class="info-item">
			<view class="label">头像</view>
			<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :src="info.avatar" mode="widthFix"></image>
			</button>
		</view>
		<view class="info-item">
			<view class="label">昵称</view>
			<input class="input-content" v-model="info.name" type="nickname" placeholder="输入昵称"
				placeholder-class="placeholder-class" :always-embed="false"
				:adjust-position="true" :hold-keyboard="false" name="nickName"
				@touchstart="requirePrivacyAuthorize" @input="changeNickName" @blur="handleBlur"></input>
		</view>
		<view class="info-item">
			<view class="label">编号</view>
			<view class="">{{info.user_no}}</view>
		</view>
		<view class="info-item">
			<view class="label">手机号</view>
			<button class="content" hover-class="none" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<text>{{info.phone}}</text>
				<text style="color: #003D99;padding-left: 8rpx;">换绑</text>
			</button>
		</view>
		<view class="info-item">
			<view class="label">激活手机</view>
			<view class="">{{info.phone_verify ? '已激活' : '未激活'}}</view>
		</view>
		<view class="info-item">
			<view class="label">绑定微信</view>
			<button class="content" @click="openAuthorize">{{info.is_bind_wx ? '已绑定' : '未绑定'}}</button>
		</view>
		<!-- <view class="info-item">
			<view class="label">身份验证</view>
			<view class="">{{info.identity_verify ? '已验证' : '未验证'}}</view>
		</view> -->
		<view class="info-item">
			<view class="label">登录时间</view>
			<view class="">{{info.login_time}}</view>
		</view>
		
		
		<view class="footer">
			<button class="confirm-btn" @click="handleLayout">退出登录</button>
		</view>
		<!-- 授权 -->
		<authorize-popup ref="authorize" @success="getMyInfo"></authorize-popup>
	</view>
</template>

<script>
	import { upLoadServe } from '@/utils/uploadImg.js'
	
	export default {
		data() {
			return {
				info: {},
				timer: null,
			};
		},
		onLoad() {
			this.getMyInfo()
		},
		onShareAppMessage(){},
		onShareTimeline() {},
		methods: {
			// 退出登录
			handleLayout() {
				this.$api.layoutApi().then(res=> {
					this.$store.commit('login/SET_TOKEN', '')
					this.$store.commit('login/SET_USER_INFO', {})
					uni.showToast({
						title: '退出登录成功'
					})
					setTimeout(()=> {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1200)
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 获取我的信息
			getMyInfo() {
				this.$api.myInfoApi().then(res => {
					this.info = res.data
				}).catch(err=> {
					console.log('err', err);
				})
			},
			getPhoneNumber(event) {
				if (event.detail.errMsg === 'getPhoneNumber:ok') {
					const params = {
						appid: this.$store.state.common.appid,
						code: event.detail.code
					}
					this.$api.bindWxPhoneApi(params).then(res=> {
						this.$store.commit('login/SET_TOKEN', res.data.access_token)
						this.$store.commit('login/SET_USER_INFO', res.data)
						this.getMyInfo()
					}).catch(err=> {
						console.log('err', err)
					})
				}
			},
			openAuthorize() {
				if (this.info.is_bind_wx) {
					return
				}
				this.$refs.authorize.open()
			},
			// 更换头像
			onChooseAvatar(event) {
				upLoadServe([event.detail.avatarUrl], 'avatar', (urlList)=> {
					const params = {
						name: this.info.name,
						avatar: urlList[0].url
					}
					this.$api.setUserInfoApi(params).then(res=> {
						this.getMyInfo()
					}).catch(err=> {
						console.log('err', err);
					})
				})
			},
			requirePrivacyAuthorize() {
				if (wx.requirePrivacyAuthorize) {
					console.log("当前基础库支持api wx.requirePrivacyAuthorize");
					wx.requirePrivacyAuthorize({
						success: res => {
							console.log('用户同意了隐私协议 或 无需用户同意隐私协议');
							//用户同意隐私协议后给昵称输入框聚焦
						},
						fail: res => {
							console.log('用户拒绝了隐私协议');
						}
					})
				} else {
					console.log("当前基础库不支持api wx.requirePrivacyAuthorize");
				}
			},
			changeNickName(event) {
				const { value } = event.detail
				const params = {
					name: this.info.name,
					avatar: this.info.avatar
				}
				clearTimeout(this.timer)
				// this.timer = setTimeout(()=> {
				// 	this.$api.setUserInfoApi(params).then(res=> {
				// 		this.getMyInfo()
				// 	}).catch(err=> {
				// 		console.log('err', err);
				// 	})
				// }, 800)
			},
			handleBlur(event) {
				const { value } = event.detail
				const params = {
					name: this.info.name,
					avatar: this.info.avatar && this.info.avatar != 'null' ? this.info.avatar : ''
				}
				if (this.info.name) {
					clearTimeout(this.timer)
					this.timer = setTimeout(()=> {
						this.$api.setUserInfoApi(params).then(res=> {
							this.getMyInfo()
						}).catch(err=> {
							console.log('err', err);
						})
					}, 800)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {
		
		
		.info-item {
			height: 92rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			font-size: 28rpx;
			font-weight: 400;
			line-height: 38rpx;
			
			padding: 8rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border: 1px solid rgba(0, 0, 0, 0.02);
		}
		
		.label {
			color: rgba(0, 0, 0, 0.5);
		}
		
		.input-content {
			text-align: right;
			font-size: 28rpx;
			font-weight: 400;
		}
		
		.content {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 38rpx;
		}
		
		.avatar {
			width: 72rpx;
			height: 72rpx;
			border-radius: 16rpx;
			background-color: #e5e5e5;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.footer {
		padding: 32rpx;
		padding-top: 100rpx;
		box-sizing: border-box;
	}
</style>
